<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="style1 item-list" v-cloak>
        <!-- <div class="item" v-for="item in items">
            <div class="cover">
                <img src="https://tcdn.udeve.net/fang2021/377c3034-69e7-4f70-83a1-91d4b3d8f819.jpg" />
            </div>
            <div class="left">
                <div class="title">{{ item.title }}</div>
                <div class="summary">{{ item.summary }}</div>
                <div class="footer">
                    <div class="author">{{ item.author }}</div>
                    <div class="date">{{ item.date }}</div>
                </div>
            </div>
        </div> -->

        <div class="videos" v-cloak>
            <div class="item" :key="i" v-for="item, i in items">
                <div class="video">
                    <div class="cover">
                        <img :src="item.cover + '?imageView2/2/w/400'" />
                    </div>
                    <div class="footer">
                        <div class="title">{{ item.title }}</div>
                        <div class="top">
                            <div style="display: flex;align-items: center;">
                                <img :src="item.author_avatar + '?imageView2/2/w/400'" />
                                <span class="author">{{ item.author_name }}</span>
                            </div>
                            <span class="date">{{ item.created_at | formatDate  }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
export default {
    data () {
        return {
            loading: false,
        };
    },
    props: {
        items: { type: Array, default: [] },
    },
    filters: {
        formatDate(value) {
            const date = new Date(value);
            const year = date.getFullYear();
            const month = (date.getMonth() + 1).toString().padStart(2, '0');
            const day = date.getDate().toString().padStart(2, '0');
            return `${year}.${month}.${day}`;
        }
    },

    mounted: function () { },

    computed: {},

    methods: {},
};
</script>

<style scoped>
.videos {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

.videos .item {
    margin-right: 16px;
    width: calc(50% - 8px);
}

.videos .item:nth-child(2n) {
    margin-right: 0px;
}

.video {
    font-size: 24px;
    margin-bottom: 20px;
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;

}

.video .cover {
    height: 275px;
}


.video .cover img {
    width: 100%;
    height: 100%;
    border-radius: 16px;
}
.video .footer {
    /* padding: 24px 18px; */
}
.video .top{
    display: flex;
    align-items: center;
}
.video .top img {
    /* color: red; */
    border-radius: 15px;
    width: 30px;
    height: 30px;
    margin-right: 15px;
}
.video .top {
    color: #999;
    font-size: 22px;
    display: flex;
    justify-content: space-between;
}

.video .top .author {
    max-width: 160px;
    overflow: hidden;
    word-wrap: break-word;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.video .top .date{
    margin-left: 12px;
}

.video .title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0 0 24px 0;
    color: #000;
    height: 92px;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.4;
}
</style>
